﻿@page "/components/sticky"

<PageOutlet Url="components/sticky"
            Title="Sticky"
            Description="sticky component of the bit BlazorUI components" />

<div>
    <DemoPage Name="Sticky"
              Description="A Sticky is a component that enables elements to stick during scrolling."
              Parameters="componentParameters"
              SubEnums="componentSubEnums"
              GitHubUrl="Utilities/Sticky/BitSticky.razor"
              GitHubDemoUrl="Utilities/Sticky/BitStickyDemo.razor">
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
            <div class="vertical-container">
                <BitSticky Class="sticky">Basic Sticky</BitSticky>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                    <br />
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                </div>
            </div>
        </DemoExample>

        <DemoExample Title="Vertical" RazorCode="@example2RazorCode" Id="example2">
            <div>Try scrolling the containers to see the sticky components in action:</div>
            <br /><br /><br />
            <div><b>Top</b>:</div>
            <div class="vertical-container">
                <p>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </p>
                <BitSticky Class="sticky" Position="@BitStickyPosition.Top">Stick to Top</BitSticky>
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                    <br />
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                </div>
            </div>
            <br /><br /><br />
            <div><b>Bottom</b>:</div>
            <div class="vertical-container">
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                    <br />
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                </div>
                <BitSticky Class="sticky" Position="@BitStickyPosition.Bottom">Stick to Bottom</BitSticky>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </div>
            <br /><br /><br />
            <div><b>Top and Bottom</b>:</div>
            <div class="vertical-container">
                <div>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </div>
                <BitSticky Class="sticky" Position="@BitStickyPosition.TopAndBottom">Stick to Top and Bottom</BitSticky>
                <div>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                    <br />
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                </div>
            </div>
        </DemoExample>

        <DemoExample Title="Horizontal" RazorCode="@example3RazorCode" Id="example3">
            <div>Try scrolling the containers to see the sticky components in action:</div>
            <br /><br /><br />
            <div><b>Start</b>:</div>
            <div class="horizontal-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
                <BitSticky Class="sticky" Position="@BitStickyPosition.Start">Stick to Start</BitSticky>
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
            </div>
            <br /><br /><br />
            <div><b>End</b>:</div>
            <div class="horizontal-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
                <BitSticky Class="sticky" Position="@BitStickyPosition.End">Stick to End</BitSticky>
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
            </div>
            <br /><br /><br />
            <div><b>Start and End</b>:</div>
            <div class="horizontal-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
                <BitSticky Class="sticky" Position="@BitStickyPosition.StartAndEnd">Stick to Start and End</BitSticky>
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.B
                </p>
            </div>
        </DemoExample>

        <DemoExample Title="Vertical spacings" RazorCode="@example4RazorCode" Id="example4">
            <div>Try scrolling the containers to see the sticky components in action:</div>
            <br /><br /><br />
            <div><b>Top=20px</b>:</div>
            <div class="vertical-container">
                <p>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </p>
                <BitSticky Class="sticky" Top="20px">Top customized</BitSticky>
                <p>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </p>
            </div>
            <br /><br /><br />
            <div><b>Bottom=2rem</b>:</div>
            <div class="vertical-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                    <br />
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                </p>
                <BitSticky Class="sticky" Bottom="2rem">Bottom customized</BitSticky>
                <p>
                    Imagine this space as a window into the future empty yet alive with the energy of endless possibilities.
                    These words stand as temporary guides, placeholders that whisper of what is to come.
                    They hold the promise of stories waiting to unfold, ideas eager to take shape, and
                    connections that will soon emerge to inspire and resonate. This is not an empty page;
                    it is a canvas, rich with potential and ready to transform into something meaningful.
                    <br />
                    For now, these lines are here to remind you of the beauty of beginnings. They are the quiet before the symphony,
                    the foundation upon which your creativity will build. Soon, this space will hold your thoughts, your visions,
                    and your voice a reflection of who you are and what you wish to share with the world. Every sentence will carry
                    purpose, every word will invite others to connect, to think, to feel. So take a moment to dream, to imagine
                    what this blank slate can become. Whether it’s a story, an idea, or a message that matters, this is your
                    starting point. The possibilities are endless, and the journey begins now.
                </p>
            </div>
            <br /><br /><br />
            <div><b>Top=2rem and Bottom=20px</b>:</div>
            <div class="vertical-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    <br />
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                    <br />
                    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                    shaped into meaning, and the emotions ready to resonate with every reader.
                </p>
                <BitSticky Class="sticky" Top="2rem" Bottom="20px">Top and Bottom customized</BitSticky>
                <p>
                    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                    each word has the power to transform into something extraordinary. Here lies the start of something new—an
                    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                    begins here, in this quiet moment where everything is possible.
                    <br />
                    Imagine this space as a window into the future empty yet alive with the energy of endless possibilities.
                    These words stand as temporary guides, placeholders that whisper of what is to come.
                    They hold the promise of stories waiting to unfold, ideas eager to take shape, and
                    connections that will soon emerge to inspire and resonate. This is not an empty page;
                    it is a canvas, rich with potential and ready to transform into something meaningful.
                    <br />
                    For now, these lines are here to remind you of the beauty of beginnings. They are the quiet before the symphony,
                    the foundation upon which your creativity will build. Soon, this space will hold your thoughts, your visions,
                    and your voice a reflection of who you are and what you wish to share with the world. Every sentence will carry
                    purpose, every word will invite others to connect, to think, to feel. So take a moment to dream, to imagine
                    what this blank slate can become. Whether it’s a story, an idea, or a message that matters, this is your
                    starting point. The possibilities are endless, and the journey begins now.
                </p>
            </div>
        </DemoExample>

        <DemoExample Title="Horizontal spacings" RazorCode="@example5RazorCode" Id="example5">
            <div>Try scrolling the containers to see the sticky components in action:</div>
            <br /><br /><br />
            <div><b>Left=20px</b>:</div>
            <div class="horizontal-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
                <BitSticky Class="sticky" Left="20px">Left customized</BitSticky>
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
            </div>
            <br /><br /><br />
            <div><b>Right=2rem</b>:</div>
            <div class="horizontal-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
                <BitSticky Class="sticky" Right="2rem">Right customized</BitSticky>
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
            </div>
            <br /><br /><br />
            <div><b>Left=2rem and Right=20px</b>:</div>
            <div class="horizontal-container">
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
                <BitSticky Class="sticky" Left="2rem" Right="20px">Left and Right customized</BitSticky>
                <p>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                </p>
            </div>
        </DemoExample>
    </DemoPage>
</div>